<template>
  <div class="main-bg">
    <el-button
      size="mini"
      type="primary"
      @click="handleAdd">新增</el-button>
    <div class="container">
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column
          prop="afficheTitle"
          align="center"
          :show-overflow-tooltip="true"
          label="公告标题">
        </el-table-column>
        <el-table-column
          prop="afficheContent"
          align="center"
          :show-overflow-tooltip="true"
          label="公告内容">
        </el-table-column>

        <el-table-column
          prop="sentAmount"
          align="center"
          label="发送人数">
        </el-table-column>
        <el-table-column
          prop="afficheStatus"
          align="center"
          label="状态">
          <template slot-scope="scope">
            {{scope.row.afficheStatus==1002?'上架':'下架'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
          <template slot-scope="scope">
            {{timestampToTime(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="操作"
          width="350"
          fixed="right"
          align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.sentAmount==0"
              @click="handleDetail(scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleDetail(scope.row,'see')">查看</el-button>
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.sentAmount==0"
              @click="handleSend(scope.row)">发布</el-button>
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.sentAmount==0"
              @click="handleDetele(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        style="float: right;margin-top: 20px;"
        :page-size="10"
        background
        layout="total, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <!--新增弹窗-->
    <el-dialog :title="titleText"  :visible.sync="addFlag" width="80%" append-to-body class="my-label">
      <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告标题" prop="afficheTitle">
              <el-input :disabled="disabled" v-model="ruleForm.afficheTitle"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="公告内容" prop="afficheContent">
              <vue-editor :disabled="disabled" v-model="ruleForm.afficheContent" />
            </el-form-item>
          </el-col>
        </el-row>
        <div style="text-align: right">
          <el-form-item>
            <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
            <el-button @click="addFlag=false">取 消</el-button>
          </el-form-item>
        </div>

      </el-form>
    </el-dialog>


  </div>
</template>

<script>
  import {getAfficheListPage,saveAffiche,sendMerchantAfficheAll,updateAffiche,deleteAffiche  } from '@/api/notice/notice'
  import { VueEditor } from "vue2-editor";
  export default {
    name: "notice",
    components: { VueEditor },
    data(){
      return{
        pageNum:1,
        checkFlag:false,
        tableData:[],
        disabled:false,
        loading:true,
        total:0,
        checkFrom:{},
        rules:{
          afficheTitle: [
            { required: true, message: '请输入公告标题', trigger: 'blur' }
          ],
          afficheContent: [
            { required: true, message: '请输入公告内容', trigger: 'blur' }
          ],

        },
        ruleForm:{
          afficheTitle:'',
          afficheContent:''
        },
        addFlag:false,
        titleText:'',
      }
    },
    mounted(){
      this.getList()
    },
    methods:{
      handleSend(row){
        this.$confirm('将发送该公告给所有人, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let body={
            afficheId:row.afficheId,
            storeCoding: localStorage.getItem('storeCoding')
          }
          let res = await sendMerchantAfficheAll({body})
          this.getList()
          this.$message({
            type: 'success',
            message: '已发送成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发送'
          });
        });
      },
      // 删除公告
      handleDetele(row){
        this.$confirm('此操作将删除该条公告, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let body={
            afficheId:row.afficheId,
            storeCoding: localStorage.getItem('storeCoding')
          }
          let res = await deleteAffiche({body})
          this.$message({
            type: 'success',
            message: '删除成功'
          });
          this.getList()
        }).catch((err) => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleAdd(){
        this.addFlag=true
        this.disabled=false
        this.$nextTick(()=> {
          this.$refs['ruleForm'].resetFields()
        })
        this.titleText = '新增'
      },
      async getList(){
        let body={
          "pageSize": 10, //每页条数
          "pageNum": this.pageNum, //当前页
          table:{
            storeCoding: localStorage.getItem('storeCoding')
          }
        }
        let res = await getAfficheListPage({body})
        this.loading=false
        this.tableData=res.body.list
        this.total=res.body.totalCount
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let body={
              ...this.ruleForm,
              storeCoding: localStorage.getItem('storeCoding')
            }
            if(this.ruleForm.afficheId){
              // 修改
              let res=await updateAffiche({body})
              if (res.code=='2000'){
                this.$message.success('修改成功')
                this.getList()
                this.addFlag=false
              }else{
                this.$message.error(res.msg)
              }
            }else{
              // 添加
              let res=await saveAffiche({body})
              if (res.code=='2000'){
                this.$message.success('添加成功')
                this.getList()
                this.addFlag=false
              }else{
                this.$message.error(res.msg)
              }
            }

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleDetail(row,see){
        this.addFlag=true
        this.ruleForm=row
        if(see=='see'){
          this.disabled=true
          this.titleText = '查看'
        }else{
          this.disabled=false
          this.titleText = '编辑'
        }
        this.$refs.ruleForm.resetFields();
      },
      handleCurrentChange(val){
        this.pageNum=val
        this.getList()
      },
      timestampToTime(timestamp) {
        var time = this.dayjs(timestamp).format("YYYY-MM-DD");
        // var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var Y = date.getFullYear() + '-';
        // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        // var D = date.getDate() + ' ';
        return time;
      },
    }
  }
</script>

<style scoped>

</style>
